<template>
	
	<view class="container">
		<view class="head">
			<navigator @click="navBack" class="return-arrow">
				<img class="return-img" src="../../static/arrow.png">
			</navigator>
			<view class="service-list">修改资料</view>			
		</view>
		<view class="userinfo-detail van-cell-group" >
			<view class="userInfo-box">
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
							<input type="text" maxlength="200"  v-model="userName"  class="van-field_control">
						</div>
					</div>
				</view>
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
								<input type="password" maxlength="200" v-model="password"  class="van-field_control">
						</div>
					</div>
				</view>
				
				<view class="van-cell van-cell-name van-cell-required">
					<label class="van-cell_title">确认密码</label>
					<div class="van-cell_value">
						<div class="van-field_body van-field_tc">
								<input type="password" maxlength="200" v-model="confirpass"  class="van-field_control">
						</div>
					</div>
				</view>
				
			</view>
		</view>
				

		<view class="list-cell log-out-btn" @click="toCommit">
			<text class="cell-tit">确认修改</text>
		</view>
	</view>
</template>

<script>
	import {  
	    mapMutations  
	} from 'vuex';
	export default {
		data() {
			return {
				userName:'',
				password:'',
				confirpass:'',
			};
		},
		onLoad: function(event) {
			var params =event;
			this.userName = params.uuname
		},
		methods:{
			...mapMutations(['logout']),

			navBack(){
				uni.navigateBack();
			},
			toCommit(){
				if(this.password!='' || this.confirpass !=''){
					if(this.password.length < 6) {
						uni.showToast({
							title: '密码长度大于等于6位',
							icon:'none'
						});
						return false;
					}
					if(this.password != this.confirpass){
						uni.showToast({
							title: '密码不一致,请确认',
							icon:'none'
						});
						return false;
					}
				}
					uni.showLoading({
						title: '修改信息中'
					});
					uni.request({
						url: uni.getStorageSync('api_url')+'/member/updateShoperInfo?name='+this.userName+'&password='+this.password+'&mcKey='+uni.getStorageSync('shop_id')+'&userId='+uni.getStorageSync('admin_code'),
						complete: (result) => {
							uni.hideLoading();
							if(result.data.code != 1){
								uni.showToast({
									title:result.data.msg
								});
							}else{
								uni.navigateTo({
									url:'/pages/set/set'
								})
							}
					},
				});
			},

		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: #6d1c79;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
	.head{
		width: 100%;
		background-color: #ffffff;
		text-align: center;
		margin-bottom: 0.5rem;
	}
	.head img{float: left;margin: 5px 10px;}
	.userinfo-detail .submit-box uni-button {
			height:40px;
			line-height: 40px;
		}
		.userinfo-detail {
			padding: 10px;
			background: #f8f8f8;
		}
		.userInfo-box {
			background: #fff;
			padding: 5px;
		}
		.userinfo-detail .box-content {
			height: auto;
			overflow: scroll;
			max-height: 100%;
		}
		.userinfo-detail .submit-box {
			position: fixed;
		}
		.userinfo-detail .qty-box {
			padding: 0 8px;
		}
		.userinfo-detail .tc-box {
			margin-bottom: 40px;
			padding-right: 8px;
		}
		.userinfo-detail .qty-box .qty-title {
			float: left;
			line-height: 35px;
			height: 35px;
		}
		.userinfo-detail .qty-box uni-input {
			float: right;
			border: none;
		}
		.userinfo-detail .van-cell {
			padding-right: 10px;
			width: 100%;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: flex;
			line-height: 24px;
			position: relative;
			background-color: #fff;
			color: #323233;
			font-size: 14px;
			overflow: hidden;
			margin-bottom:5px;
			padding-left: 8px;
			border-bottom: 1px solid #f1f1f1;
		}
		.userinfo-detail .van-cell_title {
			max-width: 90px;
			height:35px;
			line-height: 35px;
			color: #555;
		}
		.userinfo-detail .van-cell_title, 
		.userinfo-detail .van-cell_value {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-moz-box-flex: 1;
			flex: 1;
		}
		.userinfo-detail .van-cell_value {
			color: #969799;
			overflow: hidden;
			text-align: right;
			position: relative;
			vertical-align: middle;
		}
		.userinfo-detail .van-cell_select {
			overflow: hidden;
			text-align: right;
			position: relative;
			vertical-align: middle;
			height: 35px;
			width: 110px;
			color: #000;
			border-color: #969799;
			background: #fff;
		}
		.userinfo-detail uni-textarea {
			max-height: 50px;
			text-align: left;
			border: 1px solid #969799;
		}
		.userinfo-detail .van-field_body {
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-moz-box-align: center;
			align-items: center;
		}
		.userinfo-detail .van-field_control {
			border: 0;
			margin: 0;
			padding: 0;
			width: 100%;
			resize: none;
			display: block;
			color: #323233;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			background-color: transparent;
			text-align: left;
			height: 35px;
			line-height: 35px;
			border-radius: 0;
			font-size:14px;
		}
		.userinfo-detail .uni-textarea-placeholder{
			color:#ccc;
		}
		.userinfo-detail .van-cell-required .title-bac {
			position: absolute;
			left: 5px;
			font-size: 14px;
			color: #f44;
			top: 10px;
			width: 15px;
			height: 15px;
		}
		.userinfo-detail .uni-textarea-placeholder{
			color: #ccc;
		}
	
		.userinfo-detail .uni-input-input{
			color:red;
		}
		.userinfo-detail .notes{
			clear: both;
			padding: 5px 8px;
			border: 1px dashed #00c971;
			font-size: 14px;
		}
		.userinfo-detail .van-field_tc .van-field_control{
	
		}
		.userinfo-detail .van-field_tc  uni-button{
			border-bottom: none;
			border: 1px solid #ccc;
			text-align: center;
			border-radius: 5px;
			height: 34px;
			line-height: 34px;
			font-size: 14px;
			font-weight: normal;
			background: #fff;
			color: #000;
			padding: 0 8px;
			margin: 0;
		}
		.userinfo-detail .van-field_tc .tc_active {
			background: #00c971;
			color: #fff;
			border: 1px solid #00c971;
		}
		.userinfo-detail .goods-info {
			margin: 10px 0;
			background: #fff;
			padding: 5px;
		}
		.userinfo-detail .goods-info .goods-info-tit {
			font-size: 14px;
			font-weight: 700;
			margin: 5px;
			display: block;
		}
		.userinfo-detail .submit-box {
			position: fixed;
			bottom: 0;
			background: #fff;
			border-top: 1px solid #ccc;
			width: 100%;
		}
		.userinfo-detail .submit-box span {
			font-size: 18px;
			line-height: 40px;
			color: #aaa;
			text-align: right;
			width: 50%;
			float: left;
		}
		.userinfo-detail .submit-box span.total_price {
		    color: #fe9d05;
		    text-align: left;
		    font-weight: bolder;
			float: right;
			font-size: 18px;
			line-height: 40px;
		}
		.userinfo-detail .submit-box uni-button {
		    background: #00d97a;
		    color: #fff;
		    border-radius: 0!important;
			height: 40px;
			line-height: 40px;
			width: 50%;
			float: left;
		}
		.userinfo-detail .van-field_tags {
			background-color: #3c8dbc;
			border-color: #367fa9;
			padding: 1px 10px;
			color: #fff;
			border-radius: 4px;
			cursor: default;
			float: left;
			margin-right: 5px;
			margin-top: 5px;
		}
		.service-agreement {
			margin-bottom: 40px;
		}
</style>
